<template>
    <view class="box_p" @click="go()" hover-class="uni-list-cell-hover">
		<view class="imgContent" :style="{ background: bg }">
			<image :src="img" :style="{ width: w, height: w}" />
			<view class="count" v-if="showNum && taskCount">{{taskCount}}</view>
		</view>
        <view class="title">{{ title }}</view>
    </view>
</template>

<script>
export default {
    props: {
        img: String,
        bg: String,
        title: String,
        url: String,
        fun: String,
        size: Number,
		showNum: Boolean,
		taskCount: String
    },
    computed: {
        w() {
            if (this.size) {
                return uni.upx2px(90) + 'px'
            } else {
                return uni.upx2px(90) + 'px'
            }
        }
    },
    data() {
        return {}
    },
    methods: {
        go() {
			if (this.fun) {
				uni.$emit(this.fun, {title: this.title, url: this.url})
			}
            if (this.url) {
                uni.navigateTo({
                    url: this.url
                })
            }
        }
    }
}
</script>

<style lang="scss">
	.box_p {
		box-sizing: border-box;
		text-align: center;
		margin: 10px 0;
		width: 94px;
	}

	.imgContent {
		width: 45px;
		height: 45px;
		padding: 2px;
		border-radius: 22px;
		margin: 0 auto;
	}

	.count {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #f43530;
		color: #fff;
		font-size: 12px;
		padding: 3px 1px;
		box-sizing: border-box;
		transform: translate(35px, -50px);
		transform-origin: 100%;
	}

	.box_p .title {
		margin-top: 10px;
		font-size: 14px;
		color: $uni-color-subtitle;
	}
</style>
